<template>
  <section class="cms-body flex">

    <!-- 树组件 -->
    <cms-tree @change="getChannelId" :hasContent='true'></cms-tree>

    <div class="cms-content-right">
      <div class="cms-list-header clearfix flex">
        <div class="bread-box cms-left">
          <label class="">当前频道:</label>
          <ul class="type-bread">
            <li class="bread-items" v-for="(item,index) in breadItems" :key="index">
              <a href="javascript:void(0)" @click="clickBread(item.id,index)">{{item.name}}</a>
            </li>
          </ul>
        </div>
      </div>

      <div class="cms-list-header clearfix flex" style="padding:0 24px 16px 24px;flex-wrap:wrap">
        <div style="margin-top:16px;flex:auto">
          <div class="el-checkbox-group cms-left">
            <el-checkbox-button v-model="params.topLevel" @change="query" border>推荐置顶</el-checkbox-button>
            <el-checkbox-button v-model="params.recommend" @change="query" border>PC推荐</el-checkbox-button>
            <el-checkbox-button v-model="params.big" @change="query" border>大图新闻</el-checkbox-button>
            <el-checkbox-button v-model="params.alerts" @change="query" border>焦点</el-checkbox-button>
            <el-checkbox-button v-model="params.isIndexHot" @change="query" border>PC首页头条</el-checkbox-button>
            <el-checkbox-button v-model="params.channelTopLevel" @change="query" border>频道置顶</el-checkbox-button>
          </div>
          <!-- 所有类型 -->
          <el-select class="cms-left" placeholder="所有类型" v-model="params.typeId" @change="query"
                     style="width:120px;display: none;">
            <el-option label="所有类型" value=""></el-option>
            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>

          <el-select class="cms-left" placeholder="首页轮播大图" v-model="params.isRecommendSlider" @change="goQuery()"
                     style=" width:125px">
            <el-option label="首页轮播大图" value=""></el-option>
            <el-option label="否" value="0"></el-option>
            <el-option label="是" value="1"></el-option>
          </el-select>

          <el-select class="cms-left" placeholder="频道轮播大图" v-model="params.isChannelSlider" @change="goQuery()"
                     style=" width:125px">
            <el-option label="频道轮播大图" value=""></el-option>
            <el-option label="否" value="0"></el-option>
            <el-option label="是" value="1"></el-option>
          </el-select>
          <el-select class="cms-width" placeholder="标签" filterable v-model="params.tagId" clearable @change="goQuery()">
            <el-option v-for="(tag,index) in tagList" :key="index" :label="tag.tagName" :value="tag.tagId"></el-option>
          </el-select>
          <!-- 排序方式 -->
          <el-select v-model="params.orderBy" @change="query" style="display: none;">
            <el-option label="ID降序" value="0"></el-option>
            <el-option label="ID升序" value="1"></el-option>
            <el-option label="发布时间降" value="2"></el-option>
            <el-option label="发布时间升" value="3"></el-option>
            <el-option label="推荐置顶降,发布降" value="4"></el-option>
            <el-option label="推荐置顶降,发布升" value="5"></el-option>
            <el-option label="内容状态升,发布降" value="6"></el-option>
          </el-select>
        </div>
        <div style="margin-top:16px;flex:auto" class="content-flex-right">
          <cms-input label="标题" v-model="params.title"></cms-input>
          <cms-input label="内容" v-model="params.content"></cms-input>
          <cms-input label="编辑" v-model="params.userName"></cms-input>
          <cms-input label="责编" v-model="params.checkUserName"></cms-input>
          <el-button @click="goQuery()">查询</el-button>
        </div>
      </div>

      <el-table :data="tableData" stripe @selection-change="checkIds" v-loading="loading">
        <el-table-column type="selection" width="32" align="center"></el-table-column>
        <el-table-column prop="id" label="id" width="50" align="left"></el-table-column>
        <el-table-column label="图" align="center" width="28">
          <div slot-scope="scope" style="cursor: pointer" v-if="scope.row.contentImg !='' || scope.row.liveImage !=''">
            <span @click="preivewImg(scope.row)">
              <img src="../../../../../static/images/tupian.png" style="height: 20px;width: 18px;vertical-align: middle;" alt="点击预览图片"/>
            </span>
          </div>
        </el-table-column>
        <el-table-column prop="title" label="标题" align="left" min-width="300px">
          <div slot-scope="scope" style="cursor: pointer" @click="cellClick(scope.row)" title="点击标题预览">
            <span class="cms-ups" v-if="scope.row.topLevel>0">[顶{{scope.row.topLevel}}]</span>
            <span class="cms-recommend" v-if="scope.row.isRecommend==1">[推荐{{scope.row.recommendLevel}}]</span>
            <span class="cms-alerts" v-if="scope.row.isAlerts==1">[焦点{{scope.row.alertsSort}}]</span>
            <span class="cms-bigNews" v-if="scope.row.isBig==1">[大图{{scope.row.bigPosition}}]</span>
            <span class="cms-indexHot" v-if="scope.row.indexHot==1">[pc首页头条{{scope.row.indexHotPosition}}]</span>
            <span style="color: blue" v-if="scope.row.hot==1">[精选]</span>
            <!--<span style="color: #f2c38c">[{{scope.row.typeName}}]</span>-->
            <span class="cms-channel-name" style="color: #999;">[{{scope.row.channelName}}]</span>{{scope.row.title}}
          </div>
        </el-table-column>
        <!--编辑 -->
        <el-table-column label="编辑" prop="userName" align="center" width="75">
          <div slot-scope="scope">
            <p style="color: #FFA500" @click="routerLink('/sysUser/pageList','pageList',scope.row.userId,{userType:1})">
              {{scope.row.userName}}</p>
          </div>
        </el-table-column>
        <el-table-column label="责编" prop="checkUserName" align="center" width="75">
          <div slot-scope="scope">
            <p style="color: #FFA500"
               @click="routerLink('/sysUser/pageList','pageList',scope.row.checkUserId,{userType:2})">
              {{scope.row.checkUserName}}</p>
          </div>
        </el-table-column>
        <!--发布时间 -->
        <el-table-column label="发布时间" prop="releaseDate" align="center" width="120"></el-table-column>
        <!--创建时间 -->
        <el-table-column label="最后更新时间" prop="updateTime" align="center" width="120"></el-table-column>
        <!--操作 -->
        <el-table-column label="操作" align="center" width="100">
          <div slot-scope="scope">
            <cms-button type="edit" @click.native="editRouterLink(scope.row)"
                        v-perms="'/content/sign/update'"></cms-button>
            <a href="javascript:void(0)" title="编辑推荐" class="cms-table-button el-icon-tickets" @click="associatedContent(scope.row)"
               v-perms="'/content/sign/associated'">
            </a>
            <a href="javascript:void(0)" title="文章克隆" class="cms-table-button el-icon-document-copy" @click="cloneNews(scope.row)"
               v-perms="'/content/sign/cloneNews'">
            </a>
          </div>
        </el-table-column>
      </el-table>

      <!-- 表格底部 -->
      <div class="cms-list-footer" style="padding-bottom:100px;">
        <div class="cms-left"></div>
        <cms-pagination :total="total" :nowPageNo="params.pageNo" @change="getPages"></cms-pagination>
      </div>

      <div class="content-fiexd">
        <el-button :disabled="disabled" @click="batchUpdate($api.viewNewsBatchReject,1,'撤稿',3)"
                   v-perms="'/content/reject'">
          批量撤稿
        </el-button>
      </div>

      <!-- 移动频道弹窗 -->
      <el-dialog class="dialog" :title="labelDialogTitle" :visible.sync="channelVisble" width="25%"
                 :before-close="handleClose" :close-on-click-modal="false">
        <div class="tree-layout">
          <div class="tree">
            <el-tree :load="ansyTree" lazy ref="channelTree" :props="props" @check-change="checkChange"
                     :default-expanded-keys="['']" show-checkbox :indent="16" node-key="id">
            </el-tree>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="confirm">选择</el-button>
        </span>
      </el-dialog>

      <!--专题弹窗-->
      <el-dialog class="dialog" :title="labelDialogTitle" :visible.sync="topicVisble" width="25%"
                 :close-on-click-modal="false" :before-close="handleClose">
        <el-checkbox-group v-model="topicIds" class="cms-checkbox-block" @change="handleChange">
          <el-checkbox v-for="(item,index) in topicList" :key="index" :label="item.id">{{item.name}}
          </el-checkbox>
        </el-checkbox-group>
        <span slot="footer" class="dialog-footer">
          <el-button @click="topicCancel">返回</el-button>
          <el-button type="primary" @click="confirmTopic">确定</el-button>
        </span>
      </el-dialog>

      <el-dialog class="dialog" title="选择频道" :visible.sync="siteVisble" width="25%">
        <cms-site-dialog @change="getPushSite"></cms-site-dialog>
        <span slot="footer" class="dialog-footer">
          <el-button @click="siteVisble = false">取消</el-button>
          <el-button type="primary" @click="pushSite">选择</el-button>
        </span>
      </el-dialog>

      <el-dialog title="文章推送" :visible.sync="pushVisble" width="25%" :before-close="handleClose"
                 :close-on-click-modal="false">
        <el-radio-group v-model="pushType">
          <el-radio :label="1">全部</el-radio>
          <el-radio :label="2">Android</el-radio>
          <el-radio :label="3">IOS</el-radio>
        </el-radio-group>
        <span slot="footer" class="dialog-footer">
          <el-button @click="pushVisble = false">取消</el-button>
          <el-button type="primary" @click="goPushContent(ids,pushType)">推送</el-button>
        </span>
      </el-dialog>
      <el-dialog title="文章预览" :visible.sync="isShowContent" v-if="isShowContent">
        <content-preview :contentId="previewId"></content-preview>
      </el-dialog>
      <el-dialog title="编辑推荐设置" :visible.sync="isShowDialog" v-if="isShowDialog" width="60%">
        <content-like :contentId="likeContentId" :typeId="typeId" :channelId="channelId"></content-like>
      </el-dialog>
      <el-dialog :visible.sync="isShowImageDialog" v-if="isShowImageDialog">
        <img :src="preivewSrc|imgPathFilter" style="max-width: 100%;max-height: 100%;display: block; margin: 0 auto;"/>
      </el-dialog>
      <el-dialog :visible.sync="isShowCloneNewsDialog" v-if="isShowCloneNewsDialog" title="克隆文章">
        <el-cascader class="cms-width" :props="{ checkStrictly: true,'value':'id','label':'name','children':'child'}"
                     :options="channelList" v-model="cloneChannelId" filterable>
        </el-cascader>

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="goClone(cloneChannelId)">克隆</el-button>
        </div>
      </el-dialog>
    </div>
  </section>
</template>

<script>
  import listMixins from '@/mixins/list'
  import axios from 'axios'

  export default {
    mixins: [listMixins],
    data() {
      return {
        params: {
          title: '',
          content: '',
          status: '2',
          typeId: '',
          topLevel: false,
          channelTopLevel: false,
          hot: false,
          userName: '',
          checkUserName: '',
          recommend: false,
          isCycle: false,
          big: false,
          alerts: false,
          isIndexHot: false,
          orderBy: '6',
          channelId: '',
          tagId: '',
          isRecommendSlider: '',
          isChannelSlider: '',
          pageNo: 1,
          pageSize: 10
        },
        breadItems: [{name: '根目录', id: ''}], //面包屑
        modelList: {}, //当前频道信息
        typeList: [], //内容类型接口
        topicList: [], //专题列表
        siteVisble: false,
        topicVisble: false, //专题弹窗
        channelVisble: false, //选择频道弹窗,
        pushVisble: false,
        pushType: 1,
        labelDialogTitle: '',
        currentCheckChannelId: 0, //当前选中频道
        topicIds: [], //选中的专题数组
        pushSites: [],
        props: {label: 'name', children: 'zones', isLeaf: 'isChild', id: 'id'},
        operateType: '',
        tableHeight: 500,
        recommendSliderVisible: false,
        channelSliderVisible: false,
        tagList: [],
        isShowContent: false,
        previewId: '',
        isShowDialog: false,
        likeContentId: "",
        typeId: "",
        channelId: "",
        preivewSrc: '',
        channelList: [],
        cloneChannelId: '',
        cloneContentId: '',
        isShowImageDialog: false,
        isShowCloneNewsDialog: false
      }
    },
    methods: {
      preivewImg(content) {
        this.isShowImageDialog = true;
        if (content.channelId == 114) {
          this.preivewSrc = content.liveImage
        } else {
          this.preivewSrc = content.contentImg
        }
      },
      cloneNews(content) {
        this.getChannelList();
        this.isShowCloneNewsDialog = true
        this.cloneContentId = content.id;
      },
      goClone(cloneChannelId, cloneContentId) {
        cloneChannelId = cloneChannelId.toString();
        let channelIds = cloneChannelId.split(",");
        for (let i in channelIds) {
          console.log(channelIds[i])
        }
        cloneChannelId = channelIds[channelIds.length - 1]
        let params = {
          cloneChannelId: cloneChannelId,
          cloneContentId: this.cloneContentId
        }
        this.$confirm('是否确认克隆文章?', '警告', {type: 'error'}).then(mes => {
          this.loading = true
          this.$http.post(this.$api.viewNewsClone,params).then(res => {
            if (res.code == "200") {
              this.cloneChannelId='';
              this.cloneContentId='';
              this.isShowCloneNewsDialog=false
              this.successMessage('操作成功');
              this.getTableData(this.params);
            }
            this.loading = false
            this.getTableData(this.params);
          });
        }).catch(error => {
          this.loading = false
        })
      },
      batchUpdate(url, status, remark, optType) {
        let params = [];
        let checkedList = this.checkedList;
        for (let i in checkedList) {
          let param = checkedList[i];
          console.log(param)
          param['contentId'] = param.id;
          param['status'] = status;
          params.push(param)
        }
        params = JSON.stringify(params);
        this.$confirm('是否确认' + remark + '?', '警告', {type: 'error'}).then(mes => {
          this.loading = true
          this.$http.post(url, {params: params, optType: optType}).then(res => {
            if (res.code == "200") {
              this.successMessage('操作成功');
              this.getTableData(this.params);
            }
            this.loading = false
            this.getTableData(this.params);
          });
        }).catch(error => {
          this.loading = false
        })
      },
      editRouterLink(rowData) {
        console.log(rowData)
        if (rowData.channelId == 114) {
          console.log(rowData.liveId);
          this.routerLink('/sysLive/update', 'update', rowData.liveId, {
            params: this.params,
            channelLevel: rowData.channelLevel,
            channelId: rowData.channelId,
            parentId: rowData.parentId
          });
        } else {
          this.routerLink('/content/sign/update', 'update', rowData.id, {
            params: this.params,
            channelLevel: rowData.channelLevel,
            channelId: rowData.channelId,
            parentId: rowData.parentId
          });
        }
      },
      deleteBatch(url, ids) {
        this.$confirm('是否确认删除?', '警告', {type: 'error'}).then(mes => {
          this.loading = true
          this.$http.post(url, {ids: ids}).then(res => {
            this.loading = false
            if (res.code == '200') {
              this.successMessage('删除成功')
              this.getTableData(this.params)
            }
          })
        }).catch(error => {
          this.loading = false
        })
      },
      getPushSite(arr) {
        let ids = [];
        for (let i in arr) {
          ids.push(arr[i].id);
        }
        this.pushSites = ids.join(",");
      },
      pushSite() {
        let params = {ids: this.ids, channelIds: this.pushSites}
        this.siteVisble = false
        this.loading = true
        axios.post(this.$api.contentPush, params).then(res => {
          this.loading = false
          if (res.code == '200') {
            this.successMessage('推送成功')
          }
        }).catch(err => {
          this.siteVisble = false
        })
      },
      getChannelList() {
        axios.post(this.$api.fullTextSearchChannelList, {hasContentOnly: true}).then(res => {
          this.channelList = this.channelList.concat(res.body); //频道列表
          console.log(this.channelList)
        })
      },
      operate(type) {
        //复制及引用打开dialog触发事件
        this.channelVisble = true
        this.operateType = type
        this.labelDialogTitle = '选择频道(' + this.$getSiteName() + ')'
      },
      topicClick() {
        //专题弹窗触发
        axios.post(this.$api.topicListAll).then(res => {
          if (res.code == '200') {
            this.topicVisble = true
            this.labelDialogTitle = '选择专题(' + this.$getSiteName() + ')'
            this.topicList = res.body
          }
        })
      },
      //频道dialog节点选中事件，处理checkbox 只能选择一个
      checkChange(node, checkStatus, childStatus) {
        if (checkStatus) {
          this.currentCheckChannelId = node.id
          this.$refs['channelTree'].setCheckedKeys([node.id], true)
        }
      },
      ansyTree(node, resolve) {
        //异步加载频道树形结构
        if (node.level === 0) {
          return resolve([{name: '根目录', id: '', isChild: true}])
        }
        if (node.level > 0) {
          axios.post(this.$api.channelList, {parentId: node.data.id}).then(res => {
            const data = []
            for (let i in res.body) {
              let obj = {}
              obj.id = res.body[i].id
              obj.isChild = res.body[i].childCount > 0 ? false : true
              obj.name = res.body[i].name
              data.push(obj)
            }
            return resolve(data)
          })
        }
      },
      //频道dialog取消按钮操作
      cancel() {
        this.channelVisble = false
        this.$refs['channelTree'].setCheckedKeys([])
      },
      //频道dialog确认按钮操作
      confirm() {
        let url = ''
        let params = {} //请求api参数对象
        params.channelId = this.currentCheckChannelId
        params.ids = this.ids
        if (this.operateType == 'move') {
          url = this.$api.contentMove
        } else if (this.operateType == 'copy') {
          url = this.$api.contentCopy
          params.siteId = this.$getSiteId()
        } else {
          return false
        }
        this.loading = true
        axios.post(url, params).then(res => {
          if (res.code == '200') {
            this.loading = false
            this.channelVisble = false
            this.$refs['channelTree'].setCheckedKeys([])
            this.successMessage('操作成功')
            this.getTableData(this.params)
          }
        }).catch(err => {
          this.loading = false
        })
      },
      handleClose(done) {
        done()
      },
      topicCancel() {
        this.topicVisble = false
      },
      handleChange() {
        this.$emit('change', this.checked)
      },
      confirmTopic() {
        let params = {ids: this.ids, topicIds: this.topicIds.join(',')};
        this.loading = true
        axios.post(this.$api.contentSend, params).then(res => {
          if (res.code == '200') {
            this.topicVisble = false
            this.loading = false
            this.successMessage('操作成功')
          } else {
            this.loading = false
          }
        }).catch(error => {
          this.loading = false
        })
      },
      prioritysBatch(url, type) {
        let params = {};
        if (type == 1) {
          params = {ids: this.ids, topLevel: []}
          for (let i in this.checkedList) {
            params.topLevel.push(this.checkedList[i].topLevel)
          }
          params.topLevel = params.topLevel.join(',')
        }
        if (type == 2) {
          params = {ids: this.ids, channelTopLevel: []}
          for (let i in this.checkedList) {
            params.channelTopLevel.push(this.checkedList[i].channelTopLevel)
          }
          params.channelTopLevel = params.channelTopLevel.join(',')
        }
        axios.post(url, params).then(res => {
          if (res.code == '200') {
            this.successMessage('操作成功'),
              this.getTableData(this.params)
          }
        })
      },
      getChannelId(data, node) {
        //获取频道树点击
        this.creatBread(node, []);
        this.params.channelId = data.id;//传递频道id
        this.params.modelId = data.modelId;//传递模型id
        this.getChannelInfo(data.id); //获取频道信息
        this.getTableData(this.params); //获取内容信息
      },
      getChannelInfo(channelId) {
        //获取模型信息
        let modelList = [];
        axios.post(this.$api.modelList, {containDisabled: false, hasContent: true}).then(res => {
          if (res.code == '200') {
            modelList = res.body //获取模型
          }
          if (channelId != '' && channelId != undefined) {
            axios.post(this.$api.channelGet, {id: channelId, showTxt: false}).then(res => {
              if (res.body.selfModels.length > 0) {
                this.modelList = res.body.models; //获取模型
              } else {
                this.modelList = modelList;
              }
            })
          } else {
            this.modelList = modelList;
          }
        })
      },
      getTypeList() {
        //获取类型列表
        axios.post(this.$api.typeList, {containDisabled: false}).then(res => {
          if (res.code == '200') {
            this.typeList = res.body;
          }
        })
      },
      getRoleList() {
        //获取类型列表
        axios.post(this.$api.getUserRoles, {}).then(res => {
          if (res.code == '200') {
            let roleCodes = res.body.roleCodes;
          }
        })
      },
      getTagList() {
        axios.post(this.$api.contentTagList, {}).then(res => {
          if (res.code == '200') {
            this.tagList = res.body;
          }
        })
      },
      clickBread(id, index) {
      },
      creatBread(node, arr) {
        if (node.parent != null) {
          let params = {
            name: node.data.name,
            id: node.data.id
          }
          arr.push(params)
          this.creatBread(node.parent, arr)
        } else {
          this.breadItems = arr.reverse()
          return false;
        }
      },
      showPush() {
        this.pushVisble = true;
      },
      goPushContent(ids, pushType) {
        axios.post(this.$api.viewNewsPushContent, {ids: ids, pushType: pushType}).then(res => {
          if (res.code = '200') {
            this.pushVisble = false;
            this.successMessage("推送成功");
          }
        })
      },
      cellClick(row) {
        this.previewId = row.id;
        this.isShowContent = true;
      },
      associatedContent(contentInfo) {
        this.isShowDialog = true;
        this.likeContentId = contentInfo.id;
        this.typeId = contentInfo.typeId;
        this.channelId = contentInfo.channelId;
      }
    },
    created() {
      this.$store.dispatch('setCollapse', false) //收缩状态栏
      if (this.$route.query.type == 'list') {
        if (this.$route.query.id == 0) {
          this.params.channelId = ''
        } else {
          this.params.channelId = this.$route.query.id;
        }
      }
      let params = this.$route.query.params;
      if (!this.$myUtils.isNull(params)) {
        this.params = params;
      }
      this.initTableData(this.$api.viewNewsPageList, this.params) //请求列表
      this.getChannelInfo() //模型列表
      this.getTypeList() //内容类型
      this.getRoleList();
      this.getTagList();
    }
    ,
    mounted() {
      let clientHeight = document.body.clientHeight
      $('.cms-body').css('minHeight', clientHeight - 110 + 'px')
    }
  }
</script>

<style>
  .bread-box {
    display: flex;
    display: -ms-flexbox;
    align-items: center;
  }

  .bread-box label {
    color: #5a5e66;
    font-size: 14px;
  }

  .type-bread {
    margin-right: 12px;
  }

  .bread-items {
    display: inline-block;
  }

  .bread-items a {
    color: #1276c3;
    font-size: 14px;
  }

  .bread-items a::after {
    content: '/';
    padding: 0 5px;
    color: #1276c3;
  }

  .bread-items:last-child a::after {
    content: '';
    padding: 0 5px;
    color: #1276c3;
  }

</style>
